<template>
<div class="">
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

      <el-card>
          <el-alert title="警告提示的文案" type="warning"show-icon></el-alert>
      <el-row>
        <el-col class="box">
                <span>请选择商品分类：</span>
                 <!-- 选择商品分类的级联选择框 -->
                    <!-- options :指定数据源-->
                    <!-- props :用来指定配置对象-->
                    <!-- model :选中的父级分类的Id数组-->
                    <!-- change :当选中改变时触发的事件-->
                    <!-- clearable :清空选择-->
                <el-cascader expand-trigger="hover" :options="list" :props="cateProps" v-model="selectedCateKeys"  @change="handleChange"></el-cascader>
        </el-col>
      </el-row>

       <el-tabs v-model="activeName" @tab-click="handleTabClick">
       <el-tab-pane label="动态参数" name="many">
         <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="add">添加参数</el-button>
          <el-table :data="getadd" border stripe>

             <el-table-column type="expand">
                     <template slot-scope="scope">
                          <el-tag closable v-for="(item, index) in scope.row.attr_vals" :key="index" @close="handleClose(index, scope.row)">{{ item }}</el-tag>
                <!-- 输入框 -->
                          <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTageInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"> </el-input>
                <!-- 按钮 -->
                          <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
          </el-table-column>
              <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
          
          </el-table>
       </el-tab-pane>

        <el-tab-pane label="静态属性" name="only">
         <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="add">添加属性</el-button>
            <el-table :data="getapp" border stripe>
             <el-table-column type="expand">
                         <template slot-scope="scope">
                          <el-tag closable v-for="(item, index) in scope.row.attr_vals" :key="index" @close="handleClose(index, scope.row)">{{ item }}</el-tag>
                <!-- 输入框 -->
                          <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTageInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"> </el-input>
                <!-- 按钮 -->
                          <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
          </el-table-column>
              <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="属性名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
         </el-table>
       </el-tab-pane>

       </el-tabs>
      </el-card>

      <!-- 添加弹框 -->
      <el-dialog  title="添加动态参数" :visible.sync="dialogVisible" width="30%">
       <el-form :model="ruleForm" :rules="rules" ref="ruleFormm" label-width="100px" class="demo-ruleForm">
             <el-form-item label="动态参数" prop="attr_name">
               <el-input v-model="ruleForm.attr_name"></el-input>
             </el-form-item>
       </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addqd">确 定</el-button>
  </span>
</el-dialog>


</div>
</template>
<script>
import { tableData, attlist, addtj } from "@/api/api.js";
export default {
  name: "Params",
  props: [],
  data() {
    return {
      selectedCateKeys: [], //级联绑定数组
      dialogVisible: false, //添加显示或隐藏
      getadd: [], //动态参数
      getapp: [], //静态属性
      activeName: "many",
      list: [], //商品分类列表
      cateProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children"
      },
      ruleForm: {
        attr_name: ""
      },
      rules: {
        attr_name: [
          { required: true, message: "请输入删除名称", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    //钩子函数实例创建之后
    this.xuan();
  },
  computed: {
    // 按钮是否禁用 如果选择参数不为三级分类
    isBtnDisabled() {
      if (this.selectedCateKeys.length !== 3) {
        return true;
      }
      return false;
    },

    // 当前选中的三级分类的Id
    cateId() {
      if (this.selectedCateKeys.length === 3) {
        return this.selectedCateKeys[2];
      }
      return null;
    },
    // 标题
    titleText() {
      if (this.activeName === "many") {
        return "动态参数";
      }
      return "静态属性";
    }
  },
  methods: {
    //方法

    //获取商品列表
    xuan() {
      tableData(this.list).then(res => {
        if (res.meta.status === 200) {
          this.$message.success("获取商品分类列表成功");
          this.list = res.data;
          console.log(this.list);
        }
      });
    },
    //点击输入文本框
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTageInput.$refs.input.focus();
      });
    },

    //标签输入框失去焦点 敲击键盘触发该事件
    async handleInputConfirm(row) {
      if (row.inputValue.trim().length === 0) {
        row.inputValue = "";
        row.inputVisible = false;
        return;
      }
      row.attr_vals.push(row.inputValue.trim());
      row.inputValue = "";
      row.inputVisible = false;
      // 需要发起请求，保存这次操作
      // this.saveAttrVals(row)
    },
    //添加
    add() {
      this.dialogVisible = true;
    },
    //添加确定
    addqd() {
      this.$refs.ruleFormm.validate(async valid => {
        if (!valid) return;
        const res = await addtj({
          id: this.cateId,
          attr_name: this.ruleForm.attr_name,
          attr_sel: this.activeName
        });
        if (res.meta.status === 201) {
          this.$message.success("添加参数成功！");
          this.dialogVisible = false;
          this.getData();
        }
      });
    },

    //tab点击事件
    handleTabClick() {
      console.log(this.activeName);
      this.getData();
    },
    //级联选择器
    handleChange() {
      this.getData();
    },
    async getData() {
      // 证明选中的不是三级分类
      if (this.selectedCateKeys.length !== 3) {
        this.selectedCateKeys = [];
        this.getadd = [];
        this.getapp = [];
        this.$message.error("只允许选中第三级");
        return;
      }
      console.log(this.selectedCateKeys);
      const res = await attlist({
        id: this.selectedCateKeys[2],
        sel: this.activeName
      });
      console.log("参数列表", res);
      if (res.meta.status === 200) {
        this.$message.success("获取参数列表成功！");
        res.data.forEach(item => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
          // 控制文本框的显示与隐藏
          item.inputVisible = false;
          // 文本框中输入的值
          item.inputValue = "";
        });
        console.log(res.data);
        if (this.activeName === "many") {
          this.getadd = res.data;
        } else {
          this.getapp = res.data;
        }
      }
    }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.box {
  margin-top: 30px;
}
.input-new-tag {
  width: 150px;
}
</style>